<template>
  <div>
    <Drawer
        :title="title"
        v-model="visible"
        width="720"
        draggable
        :mask-closable="type=='0'"
    >
      {{type == '2'}}
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <Form ref="addEditform" :model="form" :rules="formValidate" :label-width="100" label-position="left">
          <FormItem label="会员卡id" prop="cardId">
            <Input v-model="form.cardId"
                   disabled>
              <template #append  >
                <Button
                    v-if="type == '2'"
                    icon="ios-refresh-circle"
                        @click="generate"
                        style="width: 80px">生成</Button>
              </template>
            </Input>

          </FormItem>
          <FormItem label="会员" prop="memberId">
           <Select v-model="form.memberId"
                   filterable
                  >
             <Option v-for="(member, index) in memberList"
                :key="index"
             :value="member.id"
             :label="member.nickname"></Option>
           </Select>
          </FormItem>
          <FormItem label="姓名" prop="realName">
            <Input v-model="form.realName" clearable></Input>
          </FormItem>
          <FormItem label="身份证号码" prop="idcard">
            <Input v-model="form.idcard" clearable ></Input>
          </FormItem>
          <FormItem label="生日" prop="birth">
            <DatePicker :value="form.birth" type="date" placeholder="选择生日"
                        format="yyyy-MM-dd"
                        @on-change="form.birth = $event"/>
          </FormItem>
          <FormItem label="性别" prop="sex">
            <Select v-model="form.sex">
              <Option value="男" label="男"></Option>
              <Option value="女" label="女"></Option>
            </Select>
          </FormItem>
          <FormItem label="金额" prop="cardMoney">
            <InputNumber v-model="form.cardMoney"></InputNumber>
          </FormItem>
          <FormItem label="积分" prop="cardCore">
            <InputNumber v-model="form.cardCore"></InputNumber>
          </FormItem>
          <FormItem label="卡片等级" prop="cardLevel">
            <InputNumber v-model="form.cardLevel"></InputNumber>
          </FormItem>
        </Form>
      </div>
      <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import {validateIDCard} from "@/libs/validate";
import {memberList} from "@/api/vip/vipMember";
import {addVipCard, editVipCard, deleteVipCard, generateCardId} from "@/api/vip/vipCard";

export default {
  name: "addEdit",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      type: String,
      default: '0'
    }
  },
  data(){
    return {
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        cardId: '',
        memberId: '',
        realName: '',
        idcard: '',
        sex: '',
        birth: ''
      },
      formValidate: {
        // 表单验证规则
        memberId: [
          { required: true, message: "请选择会员", trigger: "blur" },
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        birth: [
          { required: true, message: "请选择出生年月", trigger: "change" },
        ],
        cardId: [
          { required: true, message: "请生成卡号", trigger: "change" },
        ],
        realName: [
          { required: true, message: "请输入姓名", trigger: "change" },
        ],
        idcard: [
          { required: true, message: "请输入身份证号", trigger: "change" },
          { validator: validateIDCard, trigger: "change" },
        ],
      },
      memberList: []
    }
  },
  methods: {
    init(){
      this.getMemberList();
    },
    getMemberList(){
      let _this = this;
      memberList({condition: _this.form.memberId}).then(res => {
        if(res.success){
          _this.memberList = res.result;
        }
      })
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑会员卡";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
        this.form = this.data;
      } else if (this.type == "2") {
        // this.$refs.addEditform.resetFields();
        this.form = {
          cardId: '',
          memberId: '',
          realName: '',
          idcard: '',
          sex: '',
          birth: ''
        };
        this.title = "添加会员卡";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "会员详情";
        this.maxHeight = "100%";
      }
      this.visible = value;
    },
    generate(){
      // 生成卡号
      generateCardId().then(res => {
        this.form.cardId = res.result;
      })
    },
    submit(){
      // alert(JSON.stringify(this.form));
      let _this = this;
      _this.submitLoading = true;
      if(this.type == '2'){ // 添加
        _this.$refs.addEditform.validate((valid) => {
          if(valid){
            addVipCard(_this.form).then(res => {
              _this.submitLoading = false;
              if(res.success){
                _this.$Message.success(res.result);
                _this.$emit("close", true)
                _this.visible = false;
              }
            })
          }
          _this.submitLoading = false;
        })
      }else if(this.type == '1'){ // 编辑
        _this.$refs.addEditform.validate((valid) => {
          if(valid){
            editVipCard(_this.form).then(res => {
              _this.submitLoading = false;
              if(res.success){
                _this.$Message.success(res.result);
                _this.$emit("close", true)
                _this.visible = false;
              }
            })
          }
          _this.submitLoading = false;
        })
      }


    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
}
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>
